<template>
  <div id="app">
    <div class="one box" v-show="one.show">
      <img class="title" src="./assets/title.png" alt="">
      <span class="oneBtn" @click="oneBtn">开始答题</span>
    </div>
    <div class="two box" v-show="two.show">
      <div class="header">
        <div class="left">
          <span>{{two.num}}</span><span>20</span>
        </div>
        <div class="right">
          <span class="bar"></span>
          <span class="progress" :style="'width:' + two.progressW + 'vw'"></span>
          <span class="txt">{{two.time}}</span>
        </div>
      </div>
      <div class="body">
        <div class="title">这是一道<span>{{two.type}}</span></div>
        <div class="question">{{two.question}}</div>
        <div class="img" v-show="two.imgShow"><img :src="two.img" alt=""></div>
        <div class="btns" ref="btns">
          <span @click="twoClick('A')" class="A" ref="A">{{two.A}}</span>
          <span @click="twoClick('B')" class="B" ref="B">{{two.B}}</span>
          <span @click="twoClick('C')" class="C" ref="C">{{two.C}}</span>
          <span @click="twoClick('D')" class="D" ref="D">{{two.D}}</span>
        </div>
      </div>
      <transition name="fade">
        <div class="lion" v-show="two.lionShow" :style="'top:' + two.lionTop + 'vw'">
          <img v-show="two.zeroShow" src="./assets/lion_zero.png" alt="">
          <img v-show="two.addShow" src="./assets/lion_add.png" alt="">
          <span v-show="two.addShow">+{{two.score}}</span>
        </div>
      </transition>
      <div class="mask" v-show="two.maskShow"></div>
    </div>
    <div class="three box" v-show="three.show">
      <img src="./assets/over.png" alt="">
      <div class="txt">您的得分：<span>{{three.score | one}}</span>分</div>
      <div class="threeBtn" @click="threeBtnClick">返回</div>
    </div>
  </div>
</template>

<script>
import Json from './assets/json.js'
export default {
  name: 'app',
  data () {
    return {
      imgList: {
        i1: require('./static/01.jpg'),
        i2: require('./static/02.jpg'),
        i3: require('./static/03.jpg'),
        i4: require('./static/04.jpg'),
        i5: require('./static/05.jpg'),
        i6: require('./static/06.jpg'),
        i7: require('./static/07.jpg'),
        i8: require('./static/08.jpg'),
        i9: require('./static/09.jpg'),
        i10: require('./static/10.jpg')
      },
      one: {
        show: true
      },
      two: {
        show: false,
        list: null,
        num: 1,
        time: 10,
        timer: null,
        progressW: 60,
        type: '',
        question: '',
        img: '',
        imgShow: false,
        A: '',
        B: '',
        C: '',
        D: '',
        correct: '',
        lionTop: 90, // 54
        lionShow: false,
        zeroShow: false,
        addShow: false,
        score: 0,
        allScore: 0,
        maskShow: false
      },
      three: {
        show: false,
        score: 0
      }
    }
  },
  filters: {
    one: (val) => {
      return val.toFixed(1)
    }
  },
  methods: {
    oneBtn () {
      this.one.show = false
      this.two.num = 1
      this.list = new Json()
      this.showQuestion()
      this.two.show = true
    },
    showQuestion () {
      let n = this.two.num - 1
      this.two.type = this.list[n][0]
      this.two.question = this.list[n][1]
      if (this.list[n][2] !== '') {
        let i = 'i' + this.list[n][2]
        this.two.img = this.imgList[i]
        this.two.imgShow = true
        this.two.lionTop = 54
      } else {
        this.two.imgShow = false
        this.two.lionTop = 90
      }
      this.two.A = this.list[n][3]
      this.two.B = this.list[n][4]
      this.two.C = this.list[n][5]
      this.two.D = this.list[n][6]
      this.two.correct = this.list[n][7]
      console.log('正确答案：' + this.two.correct)
      this.countdown()
    },
    countdown () {
      let n = this.two.progressW / 10
      this.two.timer = setInterval(() => {
        this.two.progressW -= n
        this.two.time--
        if (this.two.progressW === 0) {
          clearInterval(this.two.timer)
          this.two.maskShow = true
          this.twoNo()
        }
      }, 1000)
    },
    twoClick (s) {
      clearInterval(this.two.timer)
      this.two.maskShow = true
      if (this.two.correct === s) {
        this.twoYes(s)
      } else {
        this.twoNo(s)
      }
    },
    getScore () {
      let s = 4 + (this.two.time / 10)
      s = s.toFixed(1)
      this.three.score += parseFloat(s)
      return s
    },
    twoYes (s) {
      this.$refs[s].classList.add('green')
      this.two.addShow = true
      this.two.score = this.getScore()
      this.two.lionShow = true
      setTimeout(() => {
        this.reset(s)
      }, 1000)
    },
    twoNo (s) {
      if (s !== undefined) {
        this.$refs[s].classList.add('red')
      }
      this.two.zeroShow = true
      this.two.lionShow = true
      setTimeout(() => {
        this.reset(s)
      }, 1000)
    },
    reset (s) {
      this.two.lionShow = false
      this.two.zeroShow = false
      this.two.addShow = false
      this.two.maskShow = false
      this.two.time = 10
      this.two.progressW = 60
      if (s !== undefined) {
        this.$refs[s].classList.remove('red')
        this.$refs[s].classList.remove('green')
      }
      this.two.num++
      if (this.two.num <= 20) {
        this.showQuestion()
      } else {
        this.end()
      }
    },
    end () {
      this.two.show = false
      this.three.show = true
    },
    threeBtnClick () {
      this.reset()
      this.three.score = 0
      this.three.show = false
      this.one.show = true
    }
  }
}
</script>

<style lang="scss">
html,body,#app{
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('assets/bg.jpg');
  touch-action: none;
  .box{
    height: 100%;
  }
  .one{
    text-align: center;
    .title{
      margin-top: 40vw;
      width: 80vw;
    }
    .oneBtn{
      margin-top: 10vw;
      display: inline-block;
      width: 59.9vw;
      height: 9.4vw;
      background-color: #fcba26;
      box-shadow: 0vw 0.1vw 0.3vw 0vw rgba(98, 98, 98, 0.35);
      border-radius: 2.3vw;
      font-size: 3.5vw;
      line-height: 9.4vw;
      color: #22334f;
    }
  }
  .two{
    .header{
      position: relative;
      margin: 18vw auto 0 auto;
      width: 80vw;
      height: 10vw;
      .left{
        position: relative;
        width: 10vw;
        height: 10vw;
        background-image: url('assets/num.png');
        background-size: auto 100%;
        background-repeat: no-repeat;
        span{
          position: absolute;
          font-size: 2.9vw;
          color: #fff;
          text-align: center;
        }
        span:nth-child(1){
          top: 2.2vw;
          left: 0;
          width: 6vw;
        }
        span:nth-child(2){
          top: 4.8vw;
          right: 0.6vw;
          width: 6vw;
        }
      }
      .right{
        span{
          position: absolute;
          display: inline-block;
        }
        .bar{
          top: 4vw;
          left: 11vw;
          height: 2.1vw;
          width: 60vw;
          border-radius: 1vw;
          background-color: #fff;
        }
        .progress{
          top: 4vw;
          left: 11vw;
          height: 2.1vw;
          width: 40vw;
          border-radius: 1vw;
          background-color: #8fc31f;
        }
        .txt{
          top: 3.2vw;
          left: 73vw;
          font-size: 2.9vw;
          color: #fff;
          &::after{
            content: 's'
          }
        }
      }
    }
    .body{
      margin-top: 4vw;
      .title{
        text-align: center;
        font-size: 3.9vw;
        color: #fff;
        span{
          color: #fcba26;
        }
      }
      .question{
        margin: 3vw auto 0 auto;
        width: 82vw;
        color: #fff;
        font-size: 2.9vw;
      }
      .img{
        border: 1px solid #aeaeae;
        width: 50vw;
        height: 30vw;
        margin: 2vw auto 0 auto;
        text-align: center;
        img{
          height: 100%;
        }
      }
      .btns{
        display: flex;
        justify-content: cneter;
        flex-wrap: wrap;
        span{
          margin: 4vw 5vw 0 5vw;
          width: 40vw;
          height: 12vw;
          background-color: #ffffff;
          box-shadow: 0vw 0.1vw 0.3vw 0vw rgba(98, 98, 98, 0.35);
          border-radius: 1vw;
          font-size: 2.8vw;
          color: #2f667a;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          line-height: 3.2vw;
        }
        .red{
          background-color: #dd3737;
          color: #fff;
        }
        .green{
          background-color: #8fc31f;
          color: #fff;
        }
      }
    }
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }
    .lion{
      position: absolute;
      // top: 54vw;
      right: 5vw;
      width: 20.6vw;
      height: 27.6vw;
      font-size: 2.8vw;
      color: #76a01d;
      img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      span{
        position: absolute;
        top: 15.5vw;
        left: 4vw;
        width: 8vw;
        text-align: center;
        font-weight: bold;
      }
    }
    .mask{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .three{
    img{
      width: 70vw;
      margin: 16vw 16vw 0 14vw;
    }
    .txt{
      position: absolute;
      top: 58vw;
      width: 36vw;
      left: 32vw;
      text-align: center;
      font-size: 3.5vw;
      color: #2f667a;
      span{
        font-size: 5.9vw;
        color: #ec758c;
      }
    }
    .threeBtn{
      margin: 0 auto;
      width: 59.9vw;
      height: 9.4vw;
      background-color: #fcba26;
      box-shadow: 0vw 0.1vw 0.3vw 0vw rgba(98, 98, 98, 0.35);
      border-radius: 2.3vw;
      font-size: 3.5vw;
      letter-spacing: 3.5vw;
      color: #22334f;
      line-height: 9.4vw;
      text-align: center;
    }
  }
}
</style>
